<template>
  <div class="main">
    <el-button class="add" @click="clickAddBtn">新增模板</el-button>
    <div class="elTable">
      <template>
        <el-table
          size="mini"
          :data="tableData"
          stripe
          style="width: 100%"
        >
          <el-table-column
            label="模板类型"
            width="180"
          >
            <template v-slot="{row}">
              <!-- ：1-同城寄，2-省内寄，3-经济区互寄，4-跨省 -->
              {{ row.templateType===1?'同城寄': row.templateType===2?'省内寄' : row.templateType===3?'经济区互寄':'跨省' }}
            </template>

          </el-table-column>

          <el-table-column
            prop="transportType"
            label="运送类型"
            width="180"
          >
            <template v-slot="{row}">
              {{ row.transportType===1?'普快':'特快' }}
            </template>
          </el-table-column>
          <el-table-column
            prop="associatedCityList"
            label="关联城市"
            width="180"
          >
            <template v-slot="{row}">
              <!-- 1-全国，2-京津冀，3-江浙沪，4-川渝，5-黑吉辽 -->
              <!-- {{ row.associatedCityList[0] }} -->
              {{ row.associatedCityList[0]==1?'全国': row.associatedCityList[0]==2?'京津冀' : row.associatedCityList[0]==3?'江浙沪':'黑吉辽' }}

            </template>
          </el-table-column>
          <el-table-column
            prop="firstWeight"
            label="首重"
          />
          <el-table-column
            prop="continuousWeight"
            label="续重"
          />
          <el-table-column
            prop="lightThrowingCoefficient"
            label="轻抛系数"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="{row}">
              <el-button type="text" @click="edit(row)">编辑</el-button>
              <el-button style="color:orange" type="text" @click="delBtn(row.id)">删除</el-button>

            </template>
          </el-table-column>

        </el-table>
      </template>
    </div>
    <!-- 新增dialog组件 -->
    <AddTemplate :title="title" :edit-form="editForm" :dialog-visible.sync="dialogVisible" />
  </div>
</template>

<script>
import { delTemplateAPI, getTemplateAPI } from '@/api/manageData'
import AddTemplate from './add-template.vue'
export default {
  components: {
    AddTemplate
  },
  data() {
    return {
      tableData: [],
      dialogVisible: false,
      editForm: {},
      delDialog: false,
      title: ''
    }
  },
  async created() {
    const { data } = await getTemplateAPI()
    // console.log(data)
    this.tableData = data
  },
  methods: {
    clickAddBtn() {
      // console.log('1')
      this.title = '新增模板'
      this.dialogVisible = true
    },
    edit(row) {
      this.title = '编辑模板'
      // console.log(row)
      this.editForm = row
      this.dialogVisible = true
    },
    async delBtn(id) {
      // console.log(id)
      this.delDialog = true
      this.$confirm('确定要删除吗?', '删除确认', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        delTemplateAPI(id)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    }
  }
}
</script>

<style>
.main{
  margin: 20px;
  padding: 20px;
  min-height: 500px;
  background-color: #ffffff;
}

.elTable{
   margin:10px 0px;
   height: 400px;
}
.add{
      width: 100px;
    height: 40px;
    background: #e15536;
    border-radius: 4px;
    color: white;
    border-color: transparent
}

</style>
